<template>
    <van-row class="header">
        <van-col class="header-logo"></van-col>
        <van-col class="header-title"><img
                :src="webInfo.webSiteInfo.logoUrl">&nbsp;<a href="/mIndex">牛牛编程</a></van-col>
        <!--
        <van-col v-if="isLogin" class="header-avatar">
            <van-icon name="user-o" />{{$store.state.currentLoginUserInfo.username.substr(0,6)}}
        </van-col>

        <van-col v-if="!isLogin" class="header-avatar">
            <a href="/mLogin">登录</a>
        </van-col>
        -->
    </van-row>
</template>

<script>
    import request from "@/util/request";

    export default {
        name: "MymHeader",
        data(){
            return{
                webInfo: {
                    webSiteInfo:{
                        logoUrl:'',
                    }

                },
                isLogin: false,
            }
        },
        mounted() {
            //初始化网站资料
            if (this.$store.state.webSiteData) {
                console.log('网站资料已经初始化....');
                //console.log(this.$store.state.webSiteData);
                this.webInfo = this.$store.state.webSiteData;
            } else {
                console.log('网站资料未始化....');
                this.initWebSiteInfo();
            }

            //判断登录状态;
            if (this.$store.state.currentLoginStatusData) {
                console.log('登录状态已经初始化....');
                //console.log(this.$store.state.currentLoginStatusData);
                this.isLogin = this.$store.state.currentLoginStatusData;
            } else {
                console.log('登录状态未始化....');
                this.checkIsLogin();
            }
        },
        methods:{
            initWebSiteInfo() {
                console.log('执行initWebSiteInfo()....');
                request.get('/blog/site/info').then(resp => {
                    if (resp.data.code === 200) {
                        this.$store.dispatch('actionSetWebSiteData', resp.data.data);
                        this.webInfo = this.$store.state.webSiteData;
                        //this.webInfo = resp.data.data;
                    }
                }).catch(err => {
                    console.log(err);
                })
            },

            //检测是否已经登录
            checkIsLogin() {
                request.get('/commons/users/isLogin').then(resp => {
                    if (resp.data.code === 200) {
                        this.$store.dispatch('actionSetCurrentLoginStatusData', resp.data.data);
                        this.isLogin = this.$store.state.currentLoginStatusData;
                        console.log("是否登录：" + this.isLogin);
                    }
                }).catch(err => {
                    console.log(err);
                })
            }
        }
    }
</script>

<style scoped>
    .header {
        width: 100%;
        height: 38px;
        line-height: 38px;
        background-color: #336699;
        display: flex;
        color:#FFF;
    }

    .header-logo {
        width: 25%;
    }
    .header-title{
        text-align: center;
        width: 50%;
    }
    .header-title img{
        width: 28px;
        height: 28px;
        vertical-align:middle;
    }
    .header-avatar{
        width: 25%;
    }

    .header-title a, .header-avatar a {
        color:#FFF;
    }
</style>